<template>
  <div style="background-color: #777; overflow: auto; height: 100%">
    <p class="loading">加载书籍中...</p>
    <!-- <ul
      style="list-style: none; margin: 0; padding: 0"
      v-infinite-scroll="load"
      infinite-scroll-disabled="noMore"
      infinite-scroll-delay="1000"
    >
      <li v-for="i in loadPages" :key="i">
        <VuePdf style="z-index: 1" :page="i" :src="src" />
      </li>
    </ul> -->
    <div class="tools">
      <el-button
        :theme="'default'"
        :title="'基础按钮'"
        @click.stop="prePage"
        class="mr10"
        >上一页</el-button
      >
      <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
      <el-button
        :theme="'default'"
        :title="'基础按钮'"
        @click.stop="nextPage"
        class="mr10"
        >下一页</el-button
      >
    </div>
    <VuePdf
      style="margin-top: 38px"
      :src="url"
      :key="pageNum"
      :page="pageNum"
      :enableTextSelection="false"
      @totalPages="getTotalPages($event)"
    />
  </div>
</template>

<script>
import { VuePdf } from "vue3-pdfjs/esm";

const pdfResourceUrl =
  "https://learningbay-20200428.oss-cn-shanghai.aliyuncs.com/fdu20cs/%E5%AE%B6%E7%9A%84%E8%AE%B0%E5%BF%86%20%E5%9B%BD%E7%9A%84%E6%83%85%E6%80%80%E2%80%94%E2%80%94%E5%AE%8B%E5%BA%86%E9%BE%84%E6%96%87%E7%89%A9%E6%95%85%E4%BA%8B%E6%B1%87%E7%BC%96.pdf";

export default {
  components: {
    VuePdf,
  },
  data: () => ({
    url: pdfResourceUrl,
    pageNum: 1,
    pageTotalNum: 100,
    pageRotate: 0,
    // 加载进度
    loadedRatio: 0,
  }),
  created() {},
  mounted() {
    console.log("mounted");
    // const loadingTask = createLoadingTask(pdfResourceUrl);
    // loadingTask.promise.then((pdf) => {
    //   this.pageTotalNum = pdf.numPages;
    // });
  },
  methods: {
    // getNumPages(url) {
    //   const loadingTask = pdf.createLoadingTask(url);
    //   loadingTask
    //     .then((loaded) => {
    //       this.url = loadingTask;
    //       this.pageTotalNum = loaded.numPages;
    //     })
    //     .catch((err) => {
    //       // eslint-disable-next-line no-console
    //       console.error("pdf加载失败", err);
    //     });
    // },
    getTotalPages(page) {
      console.log(page);
      this.pageTotalNum = page;
    },
    // 上一页函数，
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页函数
    nextPage() {
      let page = this.pageNum;
      console.log(this.pageTotalNum);
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90;
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      // eslint-disable-next-line no-console
      console.error(error);
    },
  },
};
</script>
<style scope>
.loading {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
}
.tools {
  z-index: 1;
  position: fixed;
  top: 40px;
  right: 10px;
}
.page {
  display: inline-block;
}
</style>
